import React, { useEffect, useRef, useState } from 'react'
import { PageHeader, Steps, Button, Form, Input, Select, message ,notification } from 'antd';
import style from './News.module.css'
import axios from 'axios';
import NewsEditor from '../../../components/news-manage/newsEditor';
const { Step } = Steps;
const { Option } = Select
export default function Add(props) {
  // console.log()
  const [current, setCurrent] = useState(0)
  const [selectList, setselectList] = useState([])
  const [formInfo,setFormInfo] = useState({})
  const [content, setContent] = useState("")
  const newsRef = useRef(null)
  const User = JSON.parse(localStorage.getItem("token"))
  useEffect(() => {
    axios.get('/categories').then(res => {
      // console.log(res)
      setselectList(res.data)
    })
  }, [])
  const handleNext = () => {
    if (current === 0) {
      // console.log(newsRef.current)
      newsRef.current.validateFields().then(res => {
        // console.log(res)
        // 存储表单数据
        setFormInfo(res)
        setCurrent(current + 1)
      }).catch(err => {
        // console.log(err)
        return
      })
    } else {
      // console.log(formInfo,content)
      if(content === ""|| content.trim() === "<p></p>"){
        message.error("新闻内容不能为空")
      }else{
        setCurrent(current + 1)
      }
      
    }


  }
  const handleSave = (auditState) => {

    axios.post('/news', {
        ...formInfo,
        "content": content,
        "region": User.region?User.region:"全球",
        "author": User.username,
        "roleId": User.roleId,
        "auditState": auditState,
        "publishState": 0,
        "createTime": Date.now(),
        "star": 0,
        "view": 0,
        // "publishTime": 0
    }).then(res=>{
        notification.info({
          message: `通知`,
          description:
            `您可以到${auditState===0?'草稿箱':'审核列表'}中查看您的新闻`,
          placement:"bottomRight"
      });
      props.history.push(auditState===0?'/news-manage/draft':'/audit-manage/list')

        
    })
}

  const handlePrevious = () => {
    setCurrent(current - 1)
  }
  return (
    <div>
      <PageHeader
        className="site-page-header"
        onBack={() => null}
        title="撰写新闻"
      />,
      <Steps current={current}>
        <Step title="基本信息" description="新闻标题，新闻分类" />
        <Step title="新闻内容" description="新闻主体内容" />
        <Step title="新闻提交" description="保存草稿，提交审核" />
      </Steps>
      <div style={{ marginTop: "50px" }}>
        <div className={current == 0 ? '' : style.hidden}>
          <Form
            name="wrap"
            labelCol={{ flex: '110px' }}
            labelAlign="left"
            labelWrap
            wrapperCol={{ flex: 1 }}
            colon={false}
            ref={newsRef}
          >
            <Form.Item
              label="新闻标题"
              name="title"
              rules={[{ required: true }]}>
              <Input />
            </Form.Item>

            <Form.Item
              label="新闻分类"
              name="categoryId"
              rules={[{ required: true }]}>
              <Select>
                {
                  selectList.map(item => {
                    return <Option
                      key={item.id}
                      value={item.id}
                    >{item.title}</Option>
                  })
                }

              </Select>
            </Form.Item>
          </Form>
        </div>
        <div className={current == 1 ? '' : style.hidden}>
          <NewsEditor getContent={(value)=>{
            // console.log("value",value)
            setContent(value)
          }}></NewsEditor>
        </div>
        <div className={current == 2 ? '' : style.hidden}>3333</div>
      </div>
      <div style={{ marginTop: "50px" }}>
        {
          current == 2 && <span>
            <Button type="primary" onClick={()=>{handleSave(0)}}>保存草稿</Button>
            <Button type="primary" danger onClick={()=>{handleSave(1)}}>提交审核</Button>
          </span>
        }
        {
          current > 0 && <Button type="primary" onClick={() => { handlePrevious() }}>上一步</Button>
        }
        {
          current < 2 && <Button type="primary" onClick={() => { handleNext() }}>下一步</Button>
        }
        
      </div>
    </div>
  )
}
